home
***
CD-ROM
|
disk
|
FTP
|
other
***
search
/
.net (French) 1996 November
/
.net Magazine (FR) - Issue 01 - Nov 1996.iso
/
mac
/
Edition Web
/
PageSpinner 1.2b2
/
JavaScript Examples
/
Timer Example
< prev
next >
Wrap
Text File
|
1996-07-06
|
5KB
|
175 lines
<HTML><HEAD>
<TITLE>JavaScript Timer</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript --------
/*
JavaScript Timer
Written by Jerry Aman, Optima System, June 1, 1996.
Part of the PageSpinner distribution.
Portions based upon the JavaScript setTimeout example at:
http://home.netscape.com/eng/mozilla/Gold/handbook/javascript/
We will not be held responsible for any unwanted
effects due to the usage of this script or any derivative.
No warrantees for usability for any specific application are
given or implied.
You are free to use and modify this script,
if the credits above are given in the source code
*/
var timerID = null
var timerRunning = false
var startDate
var startSecs
function stopclock()
{
if(timerRunning)
clearTimeout(timerID)
timerRunning = false
}
function startclock()
{
startDate = new Date()
startSecs = (startDate.getHours()*60*60) + (startDate.getMinutes()*60)
+ startDate.getSeconds()
stopclock()
showtime()
}
/* -------------------------------------------------
showtime()
Puts the amount of time that has passed since
loading the page into the field named timerField in
the form named timeForm
------------------------------------------------- */
function showtime()
{
// this doesn't work correctly at midnight...
var now = new Date()
var nowSecs = (now.getHours()*60*60) + (now.getMinutes()*60) + now.getSeconds()
var elapsedSecs = nowSecs - startSecs;
var hours = Math.floor( elapsedSecs / 3600 )
elapsedSecs = elapsedSecs - (hours*3600)
var minutes = Math.floor( elapsedSecs / 60 )
elapsedSecs = elapsedSecs - (minutes*60)
var seconds = elapsedSecs
var timeValue = "" + hours
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += ((seconds < 10) ? ":0" : ":") + seconds
// Update display
document.timerForm.timerField.value = timeValue
timerID = setTimeout("showtime()",1000)
timerRunning = true
}
/* -------------------------------------------------
GetReward
Here you decide what to do depending upon
how long the user has waited
In this case we display an alert and set the
HREF property of theLink to another page
Immortal statements by Groucho Marx, 1890-1977
------------------------------------------------- */
function GetReward(theLink)
{
var msgString;
var now = new Date()
var nowSecs = (now.getHours()*60*60) + (now.getMinutes()*60) + now.getSeconds()
var elapsedSecs = nowSecs - startSecs;
theLink.href = "groucho.html" // page to go
if ( elapsedSecs > 70) // After 70 secs
msgString = "Time flies like an arrow. Fruit flies like a banana."
else
if ( elapsedSecs > 50) // After 50 secs
msgString = "I've had a perfectly wonderful evening. But this wasn't it."
else
if ( elapsedSecs > 30) // After 30 secs
msgString = "Those are my principles. If you don't like them I have others."
else
{
msgString = ("Sorry, no reward yet...")
theLink.href = "#" // Don't go to another page yet...
}
window.alert(msgString); // But let's display an alert first!
}
// -- End of JavaScript code -------------- -->
</SCRIPT>
</HEAD>
<BODY onLoad="startclock()">
<H1>JavaScript Timer</H1>
<B>This stationery page contains a JavaScript Timer Example</B>
<P>
Please note that JavaScript is currently only available in Netscape Navigator 2.0 or higher. <BR>
<FONT COLOR="931B15">Do not assume that all in your audience are using a JavaScript enabled browser.</FONT>
<HR>
<P>
<FORM NAME="timerForm" onSubmit="0">
You have been at this page for <INPUT TYPE="text" NAME="timerField" SIZE=10 VALUE ="">
</FORM>
<P>
Maybe it is time to collect your
<A HREF="#"
onClick="GetReward(this);"
onMouseOver="window.status='Oh, I cannot wait any longer!'; return true">
<B>reward!</B></A>
<P>
<HR>
<P>
<B>How to use:</B>
<P>
Copy all JavaScript (located in the Head section of this file) to another file. You can also use this file as a stationery.
<P>
Use the following Body tag <CODE><BODY onLoad="startclock()"></CODE> to start the timer.
<P>
Use something like this inside the Body part of your page to display the timer.
<XMP><FORM NAME="timerForm" onSubmit="0">
You have been at this page for
<INPUT TYPE="text" NAME="timerField" SIZE=10 VALUE ="">
</FORM>
</XMP>
<HR>
<P>
An example on how to use the value of the timer is the link that will execute the function <CODE>GetReward(theLink)</CODE>:
<XMP>Maybe it is time to collect your
<A HREF="#"
onClick="GetReward(this);"
onMouseOver="window.status='Oh, I cannot wait any longer!'; return true">
<B>reward!</B></A>
</XMP>
You can change the action of what will happen when the viewer clicks on the link by editing the function <CODE>GetReward(theLink)</CODE>.
</BODY>
</HTML>